<template>
  <div class="video-page">
    <div class="layout">
      <div class="page-content">
        <div class="video-player" v-if="playVideo">
          <div class="videoplayer" @click="flag = !flag">
            <div :class="['back-nav', {'active':!flag}]">
              <span class="back-icon" @click="goback"></span>
              <span class="header-title line-ellipsis">{{playVideo.title}}</span>
            </div>
            <video
              webkit-playsinline="true"
              playsinline=""
              x-webkit-airplay="deny"
              :src="playVideo.video.url"
              :poster="playVideo.video.imgUrl"
              autoplay=""
              preload="none"
              ref="video"
              @timeupdate="ontimeupdateFun"
              @loadeddata="onloadeddataFun"
              @ended="onendedFun"
            ></video>
            <div class="play-but" @click="play" v-if="playflag">
              <img src="../assets/images/24gf-playCircle.png" alt="" />
            </div>
            <div :class="['control-bar', 'control-bar-flex', { hidden: flag }]">
              <div class="play-pause play" @click="togglePlay">
                <img src="../assets/images/播放2.png" v-if="iconPlay" alt="" />
                <img
                  src="../assets/images/播放暂停.png"
                  v-if="!iconPlay"
                  alt=""
                />
              </div>
              <div class="step">
                <van-slider
                  v-model="currentPlay"
                  bar-height="2px"
                  active-color="#ee0a24"
                  @update:model-value="sliderInputFun"
                  @drag-start="sliderDragStartFun"
                  @drag-end="sliderDragEndFun"
                />
              </div>
              <div class="timeline">
                <span class="currentTime">{{ playerTime(timeLeft) }}</span>
                <span class="duration">/{{ playerTime(timeRight) }}</span>
              </div>
              <div class="fullscreen"></div>
            </div>
          </div>
        </div>
        <div class="preview-play" v-if="playVideo">
          <div class="preview-nav">
            <div class="nav-item" @click="tabflag = !tabflag">
              <div :class="['tab-name', { 'tab-active': tabflag }]">
                简介
                <div class="nav-active" v-if="tabflag"></div>
              </div>
            </div>
            <div class="nav-item" @click="tabflag = !tabflag">
              <div :class="['tab-name', { 'tab-active': !tabflag }]">
                评论
                <div class="nav-active" v-if="!tabflag"></div>
                <div class="comment-total">{{ playVideo.commentCount }}</div>
              </div>
            </div>
          </div>
          <div class="preview-detail" v-if="tabflag">
            <div class="preview-title">
              <div class="main-title">{{ playVideo.title }}</div>
              <div class="sub-title">
                <span>{{ time(playVideo.onlineTime) }}</span>
              </div>
              <div class="icon-box">
                <div class="box-item" @click="thumbsUp(playVideo.id)">
                  <img
                    class="movie-img"
                    v-if="!playVideo.alreadyUp"
                    src="../assets/images/middle-1.png"
                    alt=""
                  />
                  <img
                    class="movie-img"
                    v-if="playVideo.alreadyUp"
                    src="../assets/images/alreadyUp.png"
                    alt=""
                  />
                  <div>{{ playVideo.upCount }}</div>
                </div>
                <div class="box-item" @click="tabflag = false">
                  <img
                    class="movie-img"
                    src="../assets/images/middle-2.png"
                    alt=""
                  />
                  <div>{{ playVideo.commentCount }}</div>
                </div>
                <div class="box-item">
                  <img
                    class="movie-img"
                    src="../assets/images/middle-3.png"
                    alt=""
                  />
                  <div>435</div>
                </div>
                <div class="box-item">
                  <img
                    class="movie-img"
                    src="../assets/images/middle-4.png"
                    alt=""
                  />
                  <div>1014</div>
                </div>
              </div>
            </div>
            <div class="video-container">
              <div class="video-title">{{playVideo.shareInfo.content}}全部视频</div>
              <section class="video-list" v-if="videolist">
                <ul class="video-ul">
                  <div>
                    <li
                      class="video-item"
                      v-for="item in videolist"
                      :key="item.id"
                      @click="select(item.id)"
                    >
                      <div class="inner">
                        <div class="left-img">
                          <img
                            :src="item.video.imgUrl"
                            v-lazy="item.video.imgUrl"
                            alt=""
                            class="movie-img"
                          />
                          <span class="label">预告片</span>
                          <span class="txt" v-if="item.id == playVideo.id"
                            >播放中</span
                          >
                          <!-- <span class="txt" v-if="item.id!=playVideo.id">{{timeRight | playerTime}}</span> -->
                          <img
                            src="../assets/images/playerIcon.png"
                            alt=""
                            class="player"
                            v-if="item.id != playVideo.id"
                          />
                        </div>
                        <div class="right-title">
                          <div
                            :class="[
                              'main-title',
                              { 'red-title': item.id == playVideo.id },
                            ]"
                          >
                            {{ item.title }}
                          </div>
                        </div>
                      </div>
                    </li>
                  </div>
                </ul>
              </section>
            </div>
          </div>
          <div class="comment-container" v-if="!tabflag">
            <div v-if="commitlist">
              <div
                class="comment-box"
                v-for="(item, index) in commitlist"
                :key="index"
              >
                <img :src="item.userInfo.avatar" alt="" class="avatar" />
                <div class="right">
                  <div class="top-box">
                    <div class="name-box">
                      <span class="nick">{{ item.userInfo.username }}</span>
                      <div class="nick-level"></div>
                    </div>
                    <div class="time-box">
                      <time>3小时前</time>
                    </div>
                    <div class="more-box">
                      <img
                        src="../assets/images/more.png"
                        alt=""
                        class="more-img"
                      />
                    </div>
                  </div>
                  <div class="content">{{ item.content }}</div>
                  <!-- <div class="text-expander">
                                <div class="text-expander-content">
                                    <span class="ref-name">咔咔kopc：</span>
                                    现在穷的我 连看个电影都舍不得了 以前一个月得去二三次 哎
                                </div>
                            </div> -->
                  <div class="bottom">
                    <div class="appro-box">
                      <img
                        src="../assets/images/zan.png"
                        alt=""
                        class="zan-img"
                      />
                      <span class="zan-span">赞</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="bottom-comment" v-if="!tabflag">
      <div class="left-box" @click="showreplay = true">
        <div class="left-text">写评论…</div>
      </div>
    </div>
    <div class="replayCon" v-if="showreplay">
      <div class="write-comment-container">
        <textarea
          class="comment-area"
          placeholder="好看吗，快来写下你的感受吧～"
          v-model="keyword"
        ></textarea>
      </div>
      <div class="split"></div>
      <div class="btn">
        <div class="cancel" @click="showreplay = false">取消评论</div>
        <div class="submit-false" @click="send">发布评论</div>
      </div>
    </div>
  </div>
</template>

<script>
import { getMovieDetail } from "../api/movie.js";
import { getCommitsData } from "../api/commit.js";
import { ref, watch } from "vue";
import { useRoute,useRouter } from "vue-router";
export default {
  setup() {
    const route = useRoute();
    const router = useRouter();
    let video = ref(null);
    let videolist = ref([]); //视频列表
    let playVideo = ref(null); //当前播放视频
    let playflag = ref(false);
    let iconPlay = ref(false);
    let nextflag = ref(false);
    let tabflag = ref(true);
    let flag = ref(false);
    let timeLeft = ref(0); //左边时间
    let timeRight = ref(0); //右边时间
    let currentPlay = ref(0);
    let videoIndex = ref(0);
    let showreplay = ref(false);
    let keyword = ref("");
    let commitlist = ref(null);
    //    let  dzflag=ref(true)

    // 获取视频
    let getVideoFun = () => {
      getMovieDetail({ movieId: route.query.id }).then((data) => {
        videolist.value = [...data.feedVideos.feeds];
        if (route.query.freedId) {
          let index = videolist.value.findIndex((item) => item.id == route.query.freedId)
          playVideo.value = videolist.value[videoIndex.value];
          videoIndex.value = index;
        }
        // console.log(videoIndex);
        playVideo.value = videolist.value[videoIndex.value];
        // console.log(playVideo);
      });
    };
    //选择视频
    let select = (id) => {
      let index = videolist.value.findIndex((item) => item.id == id);
      videoIndex.value = index;
      iconPlay.value = false;
      // dzflag=false
      playVideo.value = videolist.value[index];
    }

    // 过滤时间
     let time = (value) => {
      var time = new Date(value);
      var y = time.getFullYear();
      var m =
        time.getMonth() + 1 < 10
          ? "0" + (time.getMonth() + 1)
          : time.getMonth() + 1;
      var d = time.getDate() < 10 ? "0" + time.getDate() : time.getDate();

      return `${y}-${m}-${d}`;
    }
    // 时长转换
    let playerTime = (data) => {
      let m = parseInt(data / 60); //分钟
      let s = parseInt(data % 60); //秒
      if (m == 0 && s == 0) {
        return "0:00";
      } else {
        return m + ":" + (s < 10 ? "0" + s : s); //0:01
      }
    }
    // 播放
    let play = () => {
      playflag.value = false;
      iconPlay.value = false;
      setTimeout(() => {
        flag.value = true;
      }, 4000);
      video.value.play();
    };
    // 播放暂停
    let togglePlay = () => {
      if (iconPlay.value) {
        //播放
        video.value.play();
        playflag.value = false;
        ontimeupdateFun();
        flag.value = false;
        setTimeout(() => {
          flag.value = true;
        }, 4000);
      } else {
        //暂停
        video.value.pause();
        playflag.value = true;
        flag.value = true;
        setTimeout(() => {
          flag.value = false;
        }, 4000);
      }
      iconPlay.value = !iconPlay.value;
    };
    //当前播放
    let nowPlay = () => {
      nextflag.value = false;
      iconPlay.value = false;
      videoIndex.value += 1;
      if (videoIndex.value >= videolist.value.length - 1) {
        videoIndex.value = 0;
      }
      getVideoFun();
      video.value.play();
    };
    //视频时间进度变化
    let ontimeupdateFun = () => {
      timeLeft.value = video.value.currentTime; //实时获取视频播放时间
      currentPlay.value = 100 * ( timeLeft.value / timeRight.value); //// 计算进度条值
    
    };
    //等待mp4加载完
    let onloadeddataFun = () => {
      timeRight.value = video.value.duration; //获取总时长
    };
    // 滚动条随时间实时变化
    let sliderInputFun = (value) => {
       
      let currentTime = (value / 100) * timeRight.value;
      timeLeft.value = currentTime;
      video.value.currentTime = currentTime;
    };
    //控制进度条开始与结束之间效果
    let sliderDragStartFun = () => {
      video.value.pause(); //暂停
      iconPlay.value = true;
    };
    let sliderDragEndFun = () => {
      video.value.play(); //播放
      iconPlay.value = false;
    };
    //视频播放完后
    let onendedFun = () => {
      iconPlay.value = true;
      flag.value = true;
      nextflag.value = true;
      // dzflag=false
      video.value.pause();

      videoIndex.value += 1;
      if (videoIndex.value >= videolist.value.length - 1) {
        videoIndex.value = 0;
      }
      getVideoFun();
    };
    //点赞
    let thumbsUp = (id) => {
      let token = window.localStorage.getItem("token");
        if (!token) {
            router.push("/login");
            return
        } 
      let index = videolist.value.findIndex((item) => item.id == id);
      videolist.value[index].alreadyUp = !videolist.value[index].alreadyUp;
      if (videolist.value[index].alreadyUp) {
        videolist.value[index].upCount = videolist.value[index].upCount + 1;
      } else {
        videolist.value[index].upCount = videolist.value[index].upCount - 1;
      }
    };
    //获取评论
    let getCommitFun = () => {
      getCommitsData().then((data) => {
        commitlist.value = data.list;
      });
    };
    //评论
    let send = () => {
      console.log(keyword.value);
      showreplay.value = false;
      keyword.value = "";
    };

    let goback = () =>{
      video.value.pause();
      setTimeout(() => {
        router.go(-1)
      }, 200);
    }

    watch(currentPlay, () => {
      playflag.value = false;
      nextflag.value = false;
    });
    watch(nextflag, () => {
      video.value.pause();
      playflag.value = true;
    });

    getVideoFun();
    getCommitFun();
    playflag.value = true;
    iconPlay.value = false;
    
    return {
      select,
      play,
      togglePlay,
      nowPlay,
      send,
      onloadeddataFun,
      sliderInputFun,
      getCommitFun,
      thumbsUp,
      sliderDragStartFun,
      onendedFun,
      sliderDragEndFun,
      videolist, //视频列表
      playVideo, //当前播放视频
      playflag,
      iconPlay,
      nextflag,
      tabflag,
      flag,
      timeLeft, //左边时间
      timeRight, //右边时间
      currentPlay,
      videoIndex,
      showreplay,
      keyword,
      commitlist,
      video,
      time,
      playerTime,
      ontimeupdateFun,
      goback,
      
     
    };
  },
};
</script>

<style lang="less" scoped>
.video-page {
  height: 100%;
  overflow-y: scroll;
  .layout {
    background-color: #f5f5f5;

    .page-content {
      padding-top: 56.25vw;
      position: relative;

      .video-player {
        position: fixed;
        z-index: 10;
        top: 0px;
        left: 0px;
        right: 0px;
        height: 56.25vw;
        margin-top: -1px;

        .videoplayer {
          position: relative;
          overflow: hidden;
          z-index: -1;

          video {
            width: 100%;
            height: 100%;
            background-color: #000;
          }
          .play-but {
            position: absolute;
            left: 50%;
            top: 50%;
            width: 50px;
            height: 50px;
            margin-left: -29px;
            margin-top: -29px;
            background-color: #fff;
            border-radius: 50%;
          }
          .control-bar-flex {
            height: 40px;
            display: flex;
            position: absolute;
            left: 0;
            bottom: 0;
            right: 0;
            height: 40px;
            background-color: rgba(34, 34, 34, 0.9);
            transform: translateZ(0);
            color: #fff;

            .play-pause {
              float: none;
              height: 40px;
              width: 40px;
              line-height: 40px;
              text-align: center;

              & > img {
                display: inline-block;
                width: 10.5px;
                height: 15.2px;
              }
            }
            .step {
              position: relative;
              left: 11px;
              flex: 1;
              margin-right: 10px;

              .background {
                position: absolute;
                top: 18px;
                width: 100%;
                height: 2px;
                background-color: #666;
              }
              .loaded {
                width: 72.8382%;
                position: absolute;
                top: 18px;
                width: 0;
                height: 2px;
                background-color: #ccc;
              }
              .current {
                width: 33.8235%;
                position: absolute;
                top: 18px;
                width: 0;
                height: 2px;
                background-color: #dd403b;
                transition: width 1s linear;

                .vernier {
                  position: absolute;
                  top: -10px;
                  right: -14px;
                  width: 12px;
                  height: 12px;
                  border-radius: 50%;
                  background-color: #fff;
                  background-clip: padding-box;
                  border: 5px solid hsla(0, 0%, 100%, 0.6) !important;
                }
              }
              .current-pause {
                transition: none;
              }
            }
            .timeline {
              float: none;
              margin: 0 0 0 17px;
              line-height: 40px;
              font-size: 11px;
              .currentTime {
                color: #eee;
              }
              .duration {
                color: #999;
              }
            }
            .fullscreen {
              float: none;
              height: 40px;
              width: 15px;
            }
          }
          .control-bar.hidden {
            transform: translate3d(0, 46px, 0);
          }
          .mark {
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            background-color: rgba(0, 0, 0, 0.88);
          }
          .next-preview-box {
            position: absolute;
            left: 33px;
            right: 33px;
            top: 49px;
            font-size: 13px;

            .next-desc {
              color: hsla(0, 0%, 100%, 0.8);
            }
            .next-box {
              margin-top: 8px;
              display: flex;
              .img {
                width: 120px;
                height: 67px;
                border-radius: 2px;
              }
              .title-box {
                flex: 1;
                margin-left: 12px;

                .title {
                  color: #fff;
                  display: -webkit-box;
                  -webkit-line-clamp: 2;
                  -webkit-box-orient: vertical;
                  overflow: hidden;
                  text-overflow: ellipsis;
                  white-space: normal;
                  word-break: break-all;
                }
                .play-btn {
                  box-sizing: border-box;
                  margin-top: 5px;
                  width: 74px;
                  height: 26px;
                  border: 1px solid #f03d37;
                  border-radius: 26px;
                  background: rgba(240, 61, 55, 0);
                  color: #f03d37;
                  line-height: 26px;
                  text-align: center;
                }
              }
            }
            .replay-box {
              margin-top: 23px;
              opacity: 0.8;
              display: flex;
              align-items: center;
              color: #fff;
              .img-replay {
                width: 13px;
                height: 13px;
                margin-right: 5px;
              }
            }
          }
        }
        .back-nav{
                width: 100%;
                height: 35px;
                background-color: rgba(0, 0, 0, 0.6);
                display: flex;
                align-items: center;
                position: absolute;
                top: 0;
                z-index: 5;
                // transition: all 0.5s linear;
                // transform: translateY(-35px);
                opacity: 0;

                .back-icon {
                    display: inline-block;
                    width: 11px;
                    height: 11px;
                    margin-left: 15px;
                    position: relative;

                    &::before{
                        content: '';
                        position: absolute;
                        top: 0;
                        width: 100%;
                        height: 100%;
                        box-sizing: border-box;
                        border-bottom: 2px solid #fff;
                        border-left: 2px solid #fff;
                        transform: rotate(45deg);
                    }
                }
                .header-title{
                    padding: 0 10px;
                    box-sizing: border-box;
                    font-size: 14px;
                    line-height: 35px;
                    height: 100%;
                    flex: 0 0 300px;
                    color: #fff;                  
                }
          }
          .active {
              // transform: translateY(0px);
              opacity:1;
          }
      }
      .preview-play {
        margin-top: 0;
        background-color: #fff;

        .preview-nav {
          width: 100%;
          height: 38.5px;
          box-shadow: inset 0 0 0 0 #e8e8e8;
          border-bottom: 1px solid #e8e8e8;
          display: flex;
          align-items: center;
          background: #fff;
          position: fixed;
          top: 56vw;
          left: 0;
          z-index: 10;

          .nav-item {
            flex: 1;
            height: 38.5px;
            font-weight: 400;
            font-family: PingFangSC-Regular;
            font-size: 16px;
            color: #999;
            letter-spacing: 0;
            text-align: center;
            display: flex;
            justify-items: center;
            flex-direction: column;

            .tab-name {
              height: 38.5px;
              line-height: 38.5px;
              position: relative;

              .nav-active {
                width: 19px;
                height: 1.9px;
                background: #f03d37;
                border-radius: 1px;
                position: absolute;
                top: 36px;
                left: 50%;
                transform: translateX(-50%);
              }
              .comment-total {
                position: absolute;
                left: 50%;
                top: -5px;
                font-weight: 400;
                font-family: PingFangSC-Regular;
                font-size: 11px;
                color: #f03d37;
                letter-spacing: 0;
                text-align: center;
                transform: translateX(20px);
              }
            }
            .tab-active {
              font-weight: 700;
              font-family: PingFangSC-Medium;
              color: #333;
              font-size: 16px;
            }
          }
        }
        .preview-detail {
          margin-top: 35px;
          .preview-title {
            padding-top: 5px;
            font-size: 18px;
            margin: 0 15px;
            color: #333;
            font-family: PingFangSC-Medium;

            .main-title {
              height: 51px;
              line-height: 26px;
              margin-top: 11.4px;
              font-weight: 500;
              font-family: PingFangSC-Medium;
              font-size: 17px;
              color: #333;
            }
            .sub-title {
              height: 19.5px;
              line-height: 19.5px;
              margin-top: 7.3px;
              font-weight: 400;
              font-family: PingFangSC-Regular;
              font-size: 13px;
              color: #999;
              letter-spacing: 0;
            }
            .icon-box {
              display: flex;
              margin-top: 28px;

              .box-item {
                flex: 1;
                width: 28px;
                height: 47px;
                margin-right: 8px;
                display: flex;
                align-items: center;
                justify-content: center;
                flex-direction: column;
                font-weight: 700;
                font-family: PingFangSC-Medium;
                font-size: 12px;
                color: #666;

                .movie-img {
                  width: 26px;
                  height: 26px;
                  margin-bottom: 5px;
                  background: #fff;
                }
                & > div {
                  height: 18px;
                  line-height: 18px;
                }
              }
            }
          }
          .video-container {
            margin-top: 25px;
            .video-title {
              font-weight: 500;
              font-family: PingFangSC-Medium;
              font-size: 15px;
              color: #333;
              letter-spacing: 0;
              line-height: 23px;
              height: 23px;
              padding-left: 15px;
            }
            .video-list {
              background-color: #fff;

              .video-ul {
                margin: 0;
                padding: 0;
                background: #fff;

                & > div {
                  .video-item {
                    height: 100px;
                    width: 100%;
                    display: flex;
                    align-items: center;
                    justify-items: center;
                    padding-left: 15px;
                    box-sizing: border-box;

                    .inner {
                      border-bottom: 1px solid #e8e8e8;
                      padding-right: 15px;
                      height: 100px;
                      width: 100%;
                      display: flex;
                      align-items: center;
                      justify-items: center;

                      .left-img {
                        position: relative;
                        height: 70px;
                        font-weight: 500;
                        font-family: PingFangSC-Medium;
                        font-size: 11px;
                        color: #fff;

                        .movie-img {
                          width: 124px;
                          height: 70px;
                          border-radius: 3px;
                        }
                        .label {
                          color: #fff;
                          position: absolute;
                          left: 3px;
                          top: 3px;
                          height: 15px;
                          padding: 1.5px;
                          line-height: 15px;
                          background: rgba(0, 0, 0, 0.75);
                          border-radius: 2px;
                          font-weight: 500;
                          opacity: 0.9;
                          font-size: 9px;
                          vertical-align: middle;
                          text-align: center;
                        }
                        .txt {
                          position: absolute;
                          top: 50px;
                          left: 7px;
                          color: #fff;
                        }
                        .player {
                          width: 20px;
                          height: 20px;
                          position: absolute;
                          left: 50%;
                          top: 50%;
                          transform: translate(-50%, -50%);
                        }
                      }
                      .right-title {
                        flex: 1;
                        margin-left: 10px;

                        .main-title {
                          font-weight: 500;
                          font-family: PingFangSC-Medium;
                          font-size: 15px;
                          color: #333;
                          letter-spacing: 0;
                          line-height: 23px;
                          display: -webkit-box;
                          overflow: hidden;
                          -webkit-line-clamp: 2;
                          -webkit-box-orient: vertical;
                        }
                        .red-title {
                          color: #f03d37;
                        }
                      }
                    }
                  }
                }
              }
            }
          }
        }
        .comment-container {
          width: 100%;
          box-sizing: border-box;
          overflow-x: hidden;
          padding-left: 15px;
          background: #fff;
          margin-top: 35px;

          .comment-box {
            margin-top: 26px;
            display: flex;
            align-items: flex-start;
            border-bottom: 1px solid #f5f5f5;

            .avatar {
              width: 34px;
              height: 34px;
              border-radius: 50%;
              background-image: url("../assets/images/maouanloading.png");
              background-repeat: no-repeat;
              background-size: cover;
              overflow: hidden;
            }
            .right {
              flex: 1;
              margin-left: 11px;
              padding-bottom: 15px;
              position: relative;

              .top-box {
                height: 35px;
                position: relative;

                .name-box {
                  display: flex;
                  height: 18px;
                  align-items: center;

                  .nick {
                    display: inline-block;
                    max-width: 150px;
                    color: #333;
                    font-size: 12px;
                    font-style: normal;
                    vertical-align: inherit;
                    text-overflow: ellipsis;
                    overflow: hidden;
                    white-space: nowrap;
                  }
                  .nick-level {
                    margin-left: 5px;
                    display: inline-block;
                    width: 36.5px;
                    height: 17px;
                  }
                }
                .time-box {
                  height: 18px;
                  position: absolute;
                  top: 21px;
                  font-weight: 400;
                  font-family: PingFangSC-Regular;
                  font-size: 12px;
                  color: #999;
                  letter-spacing: 0;
                  line-height: 18px;
                }
                .more-box {
                  position: absolute;
                  display: flex;
                  align-items: center;
                  width: 13px;
                  height: 17px;
                  right: 18px;
                  top: 12px;

                  .more-img {
                    width: 13px;
                    height: 3px;
                    background: none;
                  }
                }
              }
              .content {
                height: 21px;
                margin-top: 6px;
                font-family: PingFangSC-Regular;
                font-size: 15px;
                color: #333;
                letter-spacing: 0;
                text-align: justify;
                line-height: 21px;
                padding-right: 15px;
              }
              .text-expander {
                cursor: pointer;
                margin: 10px 15px 0 0;
                background: #f5f5f5;
                border-radius: 2px;
                padding: 9px 8px;
                font-family: PingFangSC-Regular;
                font-size: 13px;
                color: #2a2a2a;
                text-align: justify;
                line-height: 18px;

                .text-expander-content {
                  max-height: 5000px !important;
                  overflow: hidden;
                  text-overflow: ellipsis;

                  .ref-name {
                    color: #4e759e;
                  }
                }
              }
              .bottom {
                margin-top: 15px;
                height: 15px;
                display: flex;
                justify-content: flex-end;
                align-items: center;
                padding-right: 15px;
                font-family: PingFangSC-Regular;
                font-size: 12px;
                font-weight: 400;
                color: #666;

                .appro-box {
                  width: auto;
                  margin-right: 12px;
                  display: flex;
                  justify-content: center;
                  align-items: center;
                  .zan-img {
                    width: 15px;
                    height: 15px;
                    background: inherit;
                    margin-right: 3px;
                  }
                  .zan-span {
                    line-height: 15px;
                  }
                }
              }
            }
          }
          .comment-box:last-child {
            margin-bottom: 60px;
          }
        }
      }
    }
  }
  .bottom-comment {
    width: 100%;
    height: 50px;
    padding-bottom: 10px;
    background: #fff;
    position: fixed;
    bottom: 0;
    display: flex;
    justify-items: center;
    align-items: center;
    z-index: 1;

    .left-box {
      display: flex;
      justify-items: flex-start;
      align-items: center;
      width: 90%;
      height: 34px;
      margin: 0 auto;
      background: #f5f5f5;
      border-radius: 18px;

      .left-text {
        font-weight: 400;
        font-family: PingFangSC-Regular;
        font-size: 13px;
        color: #666;
        letter-spacing: 0;
        line-height: 20px;
        margin-left: 15px;
      }
    }
  }
  .replayCon {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #fff;
    z-index: 999;
    .write-comment-container {
      padding: 15px;

      .comment-area {
        height: 239px;
        width: 100%;
        border: none;
      }
    }
    .split {
      height: 1px;
      transform: scaleY(0.5);
      background: #e8e8e8;
    }
    .btn {
      text-align: end;
      padding-right: 15px;
      font-size: 13px;
      font-family: PingFangSC-Medium;
      margin-top: 15.5px;
      background: #fff;

      .cancel {
        display: inline-block;
        width: 72px;
        height: 30px;
        line-height: 30px;
        background: #d5d5d0;
        border-radius: 15px;
        color: #fff;
        text-align: center;
      }
      .submit-false {
        display: inline-block;
        width: 72px;
        height: 30px;
        margin-left: 15px;
        line-height: 30px;
        border-radius: 15px;
        color: #fff;
        text-align: center;
        background-image: linear-gradient(90deg, #faaf00, #ffbc20);
      }
    }
  }
  &::-webkit-scrollbar {
    display: none;
  }
}
::v-deep .van-slider {
  position: absolute;
  top: 18px;
  height: 2px;
  .van-slider__button {
    position: absolute;
    top: -10px;
    right: -14px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: #fff;
    background-clip: padding-box;
    border: 5px solid hsla(0, 0%, 100%, 0.6) !important;
  }
}
</style>